<template>
    <div class="personal">
        <page-title title="我的资料"></page-title>
        <p class="ps-tip">感谢您填写以下个人信息，以享受更多专属服务！</p>
        <p class="ps-tip" style="color:red;">信息确认后，将与【企业微信】成功绑定！</p>
        <p class="ps-audited" v-if="form.wxStatus==2">【您已经通过审核】</p>
        <p class="ps-auditing" v-if="form.wxStatus==4">【信息审核中】</p>
        <div class="form">
            <div class="form-item" v-if="form.phone">
                <span class="form-item-label">
                    <span class="must">*</span>姓名：</span>
                <input type="text" v-model="form.name" :class="{'validate': vdPass}">
            </div>
            <div class="form-item">
                <span class="form-item-label">
                    <span class="must">*</span>手机：</span>
                <input type="tel" v-model="tempPhone">
            </div>
            <div class="form-item" v-if="form.phone">
                <span class="form-item-label">
                    邮箱：</span>
                <input type="email" v-model="form.email">
            </div>
            <div class="form-item" v-if="form.phone">
                <span class="form-item-label">单位：</span>
                <input type="text" v-model="form.work_company">
            </div>
            <div class="form-item" v-if="form.phone">
                <span class="form-item-label">职务：</span>
                <input type="text" v-model="form.work_position">
            </div>
            <x-button class="ps-btn" v-if="form.phone" :show-loading="showLoading" :disabled="btnDisable" @click.native="submit">确认资料</x-button>
            <x-button class="ps-btn" v-else :show-loading="showLoading" @click.native="pullByPhone">提交</x-button>
        </div>
    </div>
</template>
<script>
import { XButton } from 'vux'
//用户
import { pullByPhone, getMyInfo, saveOrUpdateUser } from "@/api/user";
export default {
    data() {
        return {
            //活动Id
            activityId: this.$route.query.activityId,
            //判断是否扫码
            isScan: this.$route.query.isScan,
            //邀请函id
            inviteId: this.$route.query.inviteId,
            vdPass: true,
            //审核状态
            status: null,
            //提交的菊花
            showLoading: false,
            tempPhone: null,
            //用户信息
            form: {
                id: null,
                nickname: '',
                name: '',
                phone: null,
                email: '',
                work_company: '',
                work_position: '',
                wxStatus: null,
            },
            btnDisable: false,
        }
    },
    components: {
        XButton
    },
    methods: {
        // 如果未填写过手机号则先根据手机号拉取个人信息
        pullByPhone() {
            if (!this.tempPhone) {
                this.$vux.toast.text('请输入手机号')
            } else {
                this.form.phone = JSON.parse(JSON.stringify(this.tempPhone))
                pullByPhone(this.tempPhone).then(resp => {
                    if (resp.user.id) {
                        this.form = resp.user
                    }
                })
            }
        },
        submit() {
            this.form.phone = JSON.parse(JSON.stringify(this.tempPhone))
            let self = this
            if (!this.form.name) {
                this.$vux.toast.text('请输入姓名')
            }
            // else if (!this.form.email) {
            //     this.$vux.toast.text('请输入邮箱')
            // }
            else if (!this.form.phone) {
                this.$vux.toast.text('请输入手机号')
            } else {
                this.$vux.confirm.show({
                    title: '确认信息',
                    content: '您已确认以上信息并且提交么？',
                    onConfirm() {
                        self.showLoading = true
                        saveOrUpdateUser(self.activityId, self.form, self.inviteId, self.isScan).then(res => {
                            self.showLoading = false
                            // self.$vux.toast.show('您的资料已确认，请点击左上角的“返回”或“X”享受更多服务！')
                            self.$vux.toast.show({
                                type: 'success',
                                width: '70%',
                                time: 1000000,
                                text: '您的资料已确认，请点击左上角</br>的“返回”或“X”享受更多服务！'
                            })
                            if (res.url) {
                                window.location.href = res.url
                            }
                            self.btnDisable = true
                            getMyInfo().then(res => {
                                if (res.user) {
                                    this.form = res.user
                                }
                            }).catch(_ => { })
                        }).catch(_ => {
                            self.showLoading = false
                        })
                    }
                })
            }
        }
    },
    created() {
        this.$vux.loading.show('')
        //根据openId和wxid查询用户信息
        getMyInfo().then(res => {
            if (res.user) {
                this.form = res.user
                if (this.form.phone) {
                    this.tempPhone = JSON.parse(JSON.stringify(this.form.phone))
                }
            }
            this.$vux.loading.hide()
        }).catch(_ => {
            this.$vux.loading.hide()
        })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>